{% extends 'users/base.html' %}

{% block title %}Delete Role: {{ object.name }}{% endblock %}

{% block card_content %}
<div class="alert alert-danger">
    <h4 class="alert-heading">Warning!</h4>
    <p>You are about to delete the role <strong>{{ object.name }}</strong>. This action cannot be undone.</p>
    
    {% if object.user_set.exists %}
        <hr>
        <p class="mb-2"><strong>This will affect the following users:</strong></p>
        <ul class="mb-0">
            {% for user in object.user_set.all %}
                <li>{{ user.get_full_name }} ({{ user.email }})</li>
            {% endfor %}
        </ul>
    {% endif %}
</div>

<div class="card mb-4">
    <div class="card-header">
        <h5>Role Details</h5>
    </div>
    <div class="card-body">
        <table class="table table-bordered">
            <tr>
                <th>Name</th>
                <td>{{ object.name }}</td>
            </tr>
            <tr>
                <th>Permissions</th>
                <td>
                    {% if object.permissions.all %}
                        <div class="permissions-list">
                            {% for perm in object.permissions.all|slice:":5" %}
                                <span class="badge bg-secondary mb-1">{{ perm.name }}</span>
                            {% endfor %}
                            {% if object.permissions.count > 5 %}
                                <span class="badge bg-info">+{{ object.permissions.count|add:"-5" }} more</span>
                            {% endif %}
                        </div>
                    {% else %}
                        <span class="text-muted">No permissions</span>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <th>Users with this role</th>
                <td>{{ object.user_set.count }} user{{ object.user_set.count|pluralize }}</td>
            </tr>
            <tr>
                <th>Created</th>
                <td>{{ object.created_at|date:"F j, Y, P" }}</td>
            </tr>
        </table>
    </div>
</div>

<form method="post">
    {% csrf_token %}
    <div class="d-flex justify-content-between">
        <a href="{% url 'users:role_detail' object.pk %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Cancel
        </a>
        <button type="submit" class="btn btn-danger">
            <i class="fas fa-trash"></i> Confirm Delete
        </button>
    </div>
</form>
{% endblock %}